import { useState } from "react";

import AddTodo from "./pages/AddTodo";
import TodoList from "./pages/TodoList";
import TodoFooter from "./pages/TodoFooter";

import "./App.css";

export default function App() {
  /*
    1. 组件关系
      组件有嵌套关系
        父子组件：嵌套一层
        祖孙组件：嵌套多层

      组件没有嵌套关系
        兄弟组件

    2. 组件通信方案 
      父子组件通信 props
      祖孙组件通信 使用props一层层传递数据 -> App -> TodoList -> TodoItem 
      兄弟组件通信 使用状态提升。将（状态）数据提升到它们的公共父组件中
  */

  const [todoList, setTodoList] = useState([
    { id: 1, name: "烫头", isCompleted: true },
    { id: 2, name: "抽烟", isCompleted: false },
    { id: 3, name: "喝酒", isCompleted: false },
  ]);

  // 添加todo方法
  const addTodo = (name) => {
    // 不好：修改了原数据（不建议修改原数据）
    // todoList.push({
    //   id: Date.now(),
    //   name
    // })
    // setTodoList(todoList)

    setTodoList([...todoList, { id: Date.now(), name, isCompleted: false }]);
  };

  // 删除单个todo方法
  const delTodo = (id) => {
    setTodoList(todoList.filter((todo) => todo.id !== id));
  };

  // 更新单个todo方法
  const updateTodo = (id) => {
    setTodoList(
      todoList.map((todo) => {
        if (todo.id === id) {
          return {
            ...todo,
            isCompleted: !todo.isCompleted,
          };
        }

        return todo;
      })
    );
  };

  // 计算已完成数量
  const completedNum = () => {
    // 第二个是初始化值：看最终想返回什么
    return todoList.reduce((previous, current, index, array) => {
      /*
        previous 上一次函数调用的返回值（第一次执行是初始值）
        current 就是item，就是当前遍历项
        index 当前遍历项下标
        array 整个数组
      */
      // return previous + current.isCompleted ? 1 : 0
      return previous + current.isCompleted;
    }, 0);
    // return todoList.reduce((p, c) => p + c.isCompleted, 0)
  };

  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <AddTodo addTodo={addTodo} />
        <TodoList
          todoList={todoList}
          delTodo={delTodo}
          updateTodo={updateTodo}
        />
        <TodoFooter total={todoList.length} completedNum={completedNum()} />
      </div>
    </div>
  );
}
